<html>
<head>
<title>Slider example</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="../src/main/js/loader.js"></script>
<script type="text/javascript">

	load('core.ui.Slider');

	function init() {
		
		var pos = new core.ui.Slider(null, 120, 7);
		pos.addChangeListener({
			onPositionChanged : function(sender) {
				setValue('position', sender.getPos());
			}
		});
		
		var vol = new core.ui.Slider(null, 120, 40);
		vol.setVertical(true);
		vol.addChangeListener({
			onPositionChanged : function(sender) {
				setValue('volume', sender.getPos());
			}
		});
		
		pos.show();
		vol.show();
	}
	
	function setValue(id, val) {
		document.getElementById(id).innerHTML = val + '%';
	}
	
</script>
<style type="text/css">

	.Slider-vertical { height: 200px; }
	.Slider-horisontal { width: 200px; }
	
</style>
</head>

<body onload="init()">
Position: <span id="position">0%</span><br>
Volume: <span id="volume">0%</span>
</body>
</html>